/*
Copyright 2014, KISSY v1.47
MIT Licensed
build time: May 22 12:20
*/
/*
 Combined processedModules by KISSY Module Compiler: 

 editor/plugin/color/btn
*/

KISSY.add("editor/plugin/color/btn", ["editor", "../button", "../overlay", "../dialog-loader"], function(S, require) {
  var Editor = require("editor");
  var Button = require("../button");
  var Overlay4E = require("../overlay");
  var DialogLoader = require("../dialog-loader");
  var Node = S.Node;
  var COLORS = [["000", "444", "666", "999", "CCC", "EEE", "F3F3F3", "FFF"], ["F00", "F90", "FF0", "0F0", "0FF", "00F", "90F", "F0F"], ["F4CC" + "CC", "FCE5CD", "FFF2CC", "D9EAD3", "D0E0E3", "CFE2F3", "D9D2E9", "EAD1DC", "EA9999", "F9CB9C", "FFE599", "B6D7A8", "A2C4C9", "9FC5E8", "B4A7D6", "D5A6BD", "E06666", "F6B26B", "FFD966", "93C47D", "76A5AF", "6FA8DC", "8E7CC3", "C27BAD", "CC0000", "E69138", "F1C232", "6AA84F", "45818E", "3D85C6", "674EA7", "A64D79", "990000", "B45F06", "BF9000", "38761D", 
  "134F5C", "0B5394", "351C75", "741B47", "660000", "783F04", "7F6000", "274E13", "0C343D", "073763", "20124D", "4C1130"]], html;
  function initHTML() {
    html = '<div class="{prefixCls}editor-color-panel">' + '<a class="{prefixCls}editor-color-remove" ' + "href=\"javascript:void('\u6e05\u9664');\">" + "\u6e05\u9664" + "</a>";
    for(var i = 0;i < 3;i++) {
      html += '<div class="{prefixCls}editor-color-palette"><table>';
      var c = COLORS[i], l = c.length / 8;
      for(var k = 0;k < l;k++) {
        html += "<tr>";
        for(var j = 0;j < 8;j++) {
          var currentColor = "#" + c[8 * k + j];
          html += "<td>";
          html += '<a href="javascript:void(0);" ' + 'class="{prefixCls}editor-color-a" ' + 'style="background-color:' + currentColor + '"' + "></a>";
          html += "</td>"
        }
        html += "</tr>"
      }
      html += "</table></div>"
    }
    html += "" + "<div>" + '<a class="{prefixCls}editor-button {prefixCls}editor-color-others ks-inline-block">\u5176\u4ed6\u989c\u8272</a>' + "</div>" + "</div>"
  }
  initHTML();
  var ColorButton = Button.extend({initializer:function() {
    var self = this;
    self.on("blur", function() {
      setTimeout(function() {
        if(self.colorWin) {
          self.colorWin.hide()
        }
      }, 150)
    });
    self.on("click", function() {
      var checked = self.get("checked");
      if(checked) {
        self._prepare()
      }else {
        if(self.colorWin) {
          self.colorWin.hide()
        }
      }
    })
  }, _prepare:function() {
    var self = this, editor = self.get("editor"), prefixCls = editor.get("prefixCls"), colorPanel;
    self.colorWin = (new Overlay4E({elAttrs:{tabindex:0}, elCls:prefixCls + "editor-popup", content:S.substitute(html, {prefixCls:prefixCls}), width:172, zIndex:Editor.baseZIndex(Editor.ZIndexManager.POPUP_MENU)})).render();
    var colorWin = self.colorWin;
    colorPanel = colorWin.get("contentEl");
    colorPanel.on("click", self._selectColor, self);
    colorWin.on("hide", function() {
      self.set("checked", false)
    });
    var others = colorPanel.one("." + prefixCls + "editor-color-others");
    others.on("click", function(ev) {
      ev.halt();
      colorWin.hide();
      DialogLoader.useDialog(editor, "color", undefined, self)
    });
    self._prepare = self._show;
    self._show()
  }, _show:function() {
    var self = this, el = self.get("el"), colorWin = self.colorWin;
    colorWin.set("align", {node:el, points:["bl", "tl"], offset:[0, 2], overflow:{adjustX:1, adjustY:1}});
    colorWin.show()
  }, _selectColor:function(ev) {
    ev.halt();
    var self = this, editor = self.get("editor"), prefixCls = editor.get("prefixCls"), t = new Node(ev.target);
    if(t.hasClass(prefixCls + "editor-color-a")) {
      self.fire("selectColor", {color:t.style("background-color")})
    }else {
      if(t.hasClass(prefixCls + "editor-color-remove")) {
        self.fire("selectColor", {color:null})
      }
    }
  }, destructor:function() {
    var self = this;
    if(self.colorWin) {
      self.colorWin.destroy()
    }
  }}, {ATTRS:{checkable:{value:true}, mode:{value:Editor.Mode.WYSIWYG_MODE}}});
  var tpl = '<div class="{icon}"></div>' + '<div style="background-color:{defaultColor}"' + ' class="{indicator}"></div>';
  function runCmd(editor, cmdType, color) {
    setTimeout(function() {
      editor.execCommand(cmdType, color)
    }, 0)
  }
  ColorButton.init = function(editor, cfg) {
    var prefix = editor.get("prefixCls") + "editor-toolbar-", cmdType = cfg.cmdType, defaultColor = cfg.defaultColor, tooltip = cfg.tooltip;
    var button = editor.addButton(cmdType, {elCls:cmdType + "Btn", content:S.substitute(tpl, {defaultColor:defaultColor, icon:prefix + "item " + prefix + cmdType, indicator:prefix + "color-indicator"}), mode:Editor.Mode.WYSIWYG_MODE, tooltip:"\u8bbe\u7f6e" + tooltip});
    var arrow = editor.addButton(cmdType + "Arrow", {tooltip:"\u9009\u62e9\u5e76\u8bbe\u7f6e" + tooltip, elCls:cmdType + "ArrowBtn"}, ColorButton);
    var indicator = button.get("el").one("." + prefix + "color-indicator");
    arrow.on("selectColor", function(e) {
      indicator.css("background-color", e.color || defaultColor);
      runCmd(editor, cmdType, e.color)
    });
    button.on("click", function() {
      runCmd(editor, cmdType, indicator.style("background-color"))
    })
  };
  return ColorButton
});

